<template>
	<view class="content ">

		<view class="an-index">

			<view>
				<view class="jin">
					<view class="jin-frist" @tap='clickBtn(1)' v-if="userdata.roleid!=0">
						<div class='an-head-tile' >
							<div class='title-first' style="padding-left: 0;">今日访客数</div>
							<div class='title-first1' style="padding-left: 0;">{{maindata.arrive_nowday}}人</div>
						
						</div>

					</view>
					<view class="jin-frist" @tap='clickBtn2(1)' v-if="userdata.roleid==0">
						<div class='an-head-tile' >
						
							<div class='title-first' style="padding-left: 0;">今日到访数</div>
							<div class='title-first1' style="padding-left: 0;">{{maindata.total_yuyue}}人</div>
						
						</div>
					</view>
				</view>
			</view>
			
			<view class="second mT20" v-if="userdata.roleid!=0">
				<view>
					<view>

						<view class="an-index-grid">
							<view class="an-index-box box-color1" @tap='clickBtn(2)'>
								<div class='an-head-tile'>

									<div class='an-body-cont'>
										<p>{{maindata.no_arrive}}人</p>
									</div>
									<div class='title'>未访问</div>
								</div>

							</view>
							<view class="an-index-box box-color2" @tap='clickBtn(1)'>
								<div class='an-head-tile'>

									<div class='an-body-cont'>
										<p>{{maindata.arrive}}人</p>
									</div>
									<div class='title'>已离开</div>
								</div>

							</view>
							<view class="an-index-box box-color3" @tap='clickBtn(3)'>
								<div class='an-head-tile'>

									<div class='an-body-cont'>
										<p>{{maindata.auditing}}人</p>
									</div>
									<div class='title'>待审核</div>
								</div>

							</view>
						</view>
						
						<!-- 第二排 -->
						<view class="an-index-grid">
							<view class="an-index-box box-color11" >
								<div class='an-head-tile'>
						
									<div class='an-body-cont'>
										<p>{{maindata.brefuse}}人</p>
									</div>
									<div class='title'>访客不接受</div>
								</div>						
							</view>
							<view class="an-index-box box-color21">
								<div class='an-head-tile'>
						
									<div class='an-body-cont'>
										<p>{{maindata.refuse}}人</p>
									</div>
									<div class='title'>受访不接受</div>
								</div>
						
							</view>
							<view class="an-index-box box-color3" >
								<div class='an-head-tile'>
						
									<div class='an-body-cont'>
										<p>{{maindata.stopping}}人</p>
									</div>
									<div class='title'>暂停</div>
								</div>
						
							</view>
						</view>

					</view>

				</view>
			</view>




			<view class="second" style="margin-top:30px;">
				
				<view class="main-scan">
				
					
					
					<view class="main-btn-scan">
						
						<view class="main-btn-scan-view pT10" v-if="scanqrcodechanger">
							
						<i class="icon">
						    <i class="icon-del"></i>
						</i>						
							<!-- <image src="../../static/img/scan.png"></image> -->
							<text @click="scanqrcode">扫一扫</text>
						</view>
					</view>
				</view>

				<view class="qiun-columns" v-if="historychanger">
					<!--#ifdef H5 -->


					<!--#endif-->
					<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
						<view class="qiun-title-dot-light">{{userdata.roleid==0?'到访记录':'访问数据'}}</view> 
					</view>
					<view class="qiun-charts mT10">
						<!--#ifdef MP-ALIPAY -->
						<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
						 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchColumn"></canvas>
						<!--#endif-->
						<!--#ifndef MP-ALIPAY -->
						<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
						<!--#endif-->
					</view>
					<!--#ifdef H5 -->


					<!--#endif-->
				</view>

			</view>

		</view>
		
		<!-- 底部导航 -->
		<footernav pagePath='main'></footernav>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import {hostRoot} from '@/common/util.js'
	import uCharts from '@/components/u-charts/u-charts.js';
	import request from '../../common/vmeitime-http/requstx.js' //引进requst方法
	import {userindex,userhisindex,userinfo} from "@/common/api/user.js"
	
	var _self;
	var canvaColumn = null;
	var canvaLineA = null
	export default {

		computed: mapState(['forcedLogin', 'hasLogin', 'userInfo']),
		data() {
			return {
				maindata:"",
				rightDrawerVisible: false, //侧滑菜单是否显示
				background: ['color1', 'color2', 'color3'],
				bannerList: [], // 轮播图 图片名称数组
				bannerUrl: [], // 轮播图 图片链接地址
				// defBanner: 'http://www.anranweb.cn/uploadimg/h5_banner1.jpg', // 默认轮播图
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				imgRoot: hostRoot + 'uploads/',
				to: '',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				userdata:'',
				historychanger:true,
				scanqrcodechanger:false,
				historydata:[]
			}
		},
		onLoad() {
			//this.historychanger = false
			//this.getData()

			_self = this;
			//#ifdef MP-ALIPAY
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		if (res.pixelRatio > 1) {
			// 			//正常这里给2就行，如果pixelRatio=3性能会降低一点
			// 			//_self.pixelRatio =res.pixelRatio;
			// 			_self.pixelRatio = 2;
			// 		}
			// 	}
			// });
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
			
			
			/**/
		},
		created() {

			uni.getStorage({
				key: 'token',
				success: (res) => {
					console.log(res.data);
					this.token = res.data;
					
					if (this.token === "" || this.token==null ) {
	

					}
					
					else {
						userinfo({}).then(res=>{//获取用户信息
							console.log(res.data);
							this.message=res.data.message;
							this.userdata=res.data.data;
							console.log('xinxi'+this.message)
							this.isIdentitycard=res.data.isIdentitycard;
							this.isPersonVerify=res.data.isPersonVerify;
							this.ismoblie=res.data.ismoblie;
							
							if(this.message=='token已过期'){
							
							}
							else if(res.data.message=='token不存在'){
							
							} else if(res.data.message=='用户不存在'){
							
							}
							else if(this.ismoblie==0){
								uni.reLaunch({
								    url: '/pages/shouquan/shouji'
								});
							}
							
							else if(this.isIdentitycard==0){
								uni.reLaunch({
									url: '/pages/shouquan/shengfen'
								});
							}else if(this.isPersonVerify==0){
								uni.reLaunch({
								        url: '/pages/shouquan/renlian'
								    });
							}
						})
						
						
					}


				},

				fail: function(res) {

				}

			});



		},


		methods: {
			...mapActions(['getSysInfo']),
			/**/
			gotonum(num){
				for (let i = 0; i < 99; i++) {
					return i
				}
			},
			/*扫描二维码*/
			scanqrcode(){ 
				// this.$wx.scanQRCode({
				// 	  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				// 	  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				// 	  success: function (res) {
				// 		  console.log(res)
				// 	    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
				// 	  }
				// })
				
				  return
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera '], //从相册选择
				    success: function (res) {
						console.log(res)
				        console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			clickBtn2(){
				var url = '../myyuyue/myyuyue?type=1';
				uni.navigateTo({
					url:url
				})
			},
			clickBtn(n) { // 快速导航
				let url = ''
				let id = 3
				console.log(n)
				switch (n) {
					case 1:
						url = '../yuyuejilu/mainyuyuejilu?type=1'
						break;
					case 2:
						url = '../yuyuejilu/mainyuyuejilu?type=2'
						break;
					case 3:
						url = '../yuyuejilu/mainyuyuejilu?type=3'
						break;
					case 4:
						url = '../article/sysArticle?id=1'
						break;
				}
				uni.navigateTo({
					url: url
				});
			},
			gotoUser() { // 跳转 用户中心
				uni.navigateTo({
					url: '../user/user'
				});
				return
				if (isEmpty(this.userInfo)) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			},
			getServerData() {
				userindex({}).then(res=>{
					console.log(res)
					this.maindata=res.data
				})
				
				//histtorydata
				userhisindex({}).then(res=>{
					console.log(res)
					this.historydata = res.data
					let Column = {
						categories: [],
						series: []
					}; 
					Column.categories = res.data.date
					Column.series = res.data.data

					this.showColumn('canvasColumn',Column)
					
				})
				/*ban!*/
				// uni.request({
				// 	url: '/dpc/data.json',
				// 	data: {},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Column = {
				// 			categories: [],
				// 			series: []
				// 		};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Column.categories = res.data.data.LineA.categories;
				// 		Column.series = res.data.data.LineA.series;
				// 		_self.textarea = JSON.stringify(res.data.data.ColumnB);
				// 		_self.showColumn("canvasColumn", Column);
				// 	},
				// 	fail: () => {
				// 		_self.tips = "网络错误，小程序端请检查合法域名";
				// 	},
				// });
			},
			showColumn(canvasId, chartData) {
				console.log(chartData)
				canvaLineA=new uCharts({
					$this:_self,
					
					canvasId: canvasId,
					type: 'column',
					fontSize:11,
					legend:{show:true},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					
					xAxis: {
						type:'grid',
						gridType:'dash',
						itemCount:4,
						scrollShow:false,//新增是否显示滚动条，默认false
						scrollAlign:'left',//滚动条初始位置
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:1,
						max:10.,
						format:(val)=>{return val.toFixed(0)+'人'}
					},
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});

			},
			/*ucharts format*/
			touchColumn(e) {
				canvaLineA.scrollStart(e);
				var _that = this
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						console.log(item)
						console.log(category)
						return category + ' ' + item.name + ':' + item.data 
					}
				});

				canvaLineA.touchLegend(e, {
					animation: true
				});
				
				
			},
			moveLineA(e){
				canvaLineA.scroll(e);
				
			},
			touchEndLineA(e){
				canvaLineA.scrollEnd(e);
			},
			changeData() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaColumn.updateData({
						series: newdata.series,
						categories: newdata.categories,
						animation: true
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			}


		}
	}
</script>

<style lang="scss">
	.an-index {
		padding: 15px;
		// background: white;
		// background: #fefefe url(../../static/img/head_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.an-head-nav {
		padding: 40upx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.title {
			font-size: 18px;
			padding-left: 10px;
		}

		.btn {
			font-size: 18px;
			padding: 0 8px;
		}
	}
.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #efeff4;
	}
	
	.swiper-item {
		height: 100%;
	}

	.an-index-grid {
		display: flex;
		flex-direction: row; //主轴方向
		flex-wrap: wrap; //换行
		justify-content: space-between; //主轴上的对齐方式
	}

	.an-index-box {
		flex: 0 1 31%; //flex-grow, flex-shrink 和 flex-basis的简写
		//flex-grow: 0;	//等分剩余空间
		//flex-shrink: 1;	//等比例缩小
		//flex-basis: 48%;	//占据的主轴空间
		height: 50px;
		line-height: initial;
		color: #ffffff;
		margin-bottom: 20px;
		border-radius: 10px;
		box-shadow: 0px 10px 8px #e8e8e8;

		.an-head-tile {
			//交叉轴对齐方式
			text-align: center;


		}

	}

	.an-body-cont {
		margin-top: 5px;
	}

	.box-color2 {
		background: linear-gradient(to bottom right, #04ad67, #89ca6e);
	}

	.box-color1 {
		background: linear-gradient(to bottom right, #2a8af3, #007aff);
	}
	
	.box-color21 {
		background: linear-gradient(to bottom right, #ad0002, #ca5172);
	}
	.box-color11 {
		background: linear-gradient(to bottom right, #ad0002, #ad0002);
	}
	.jin {
		position: relative;
		
	}

	.jin-frist {
		
		background: linear-gradient(45deg,rgba(0, 122, 255, 0.521569),rgba(21, 147, 255, 0.84),rgba(10, 187, 255, 0.17));
		// background: #BEBEBE;
		position: relative;
		margin: auto;
		top: 0;
		right: 0;
		left: 0;
		color: white;
		text-align: center;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		box-shadow: 0px 10px 8px #e8e8e8;
		overflow: hidden;
	}
	.jin-frist:before,
	.jin-frist:after{
	    	content: "";
	    	position: absolute;
	    	width: 400px;
	    	height: 400px;
	    	top: -140px;
	    	left: 50%;
	    	background-color: rgba(255, 255, 255, .4);
	    	border-radius: 45%;
	    	transform: translate(-50%, -70%) rotate(0);
	    	animation: rotate 6s linear infinite;
	    	z-index: 10;
	    }
	    .jin-frist:after {
	   		border-radius: 47%;
	    	background-color: rgba(255, 255, 255, .9);
	    	transform: translate(-50%, -70%) rotate(0);
	    	animation: rotate 10s linear -5s infinite;
	    	z-index: 20;
		}
	@keyframes rotate {
	    50% {
	        transform: translate(-50%, -73%) rotate(180deg);
	    } 100% {
	        transform: translate(-50%, -70%) rotate(360deg);
	    }
	}

	.title-first {
		font-size: 17px;
		margin-top: 40px;
		overflow: hidden;
	}
	.title-first1 {
		font-size: 17px;
		margin-top: 5px;
	}

	.qiun-charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.main-scan{
		
		margin: 0 auto;
		.main-btn-scan{
			
				margin: 10px;
				image{
					
					width: 60rpx;
					height: 60rpx;
					}
				text{
					position: relative;
					font-size: 20px;
					top: -10px;
				}
		
			border-radius: 20rpx;
			width: 200px;
			background-image: linear-gradient(#31cdfe, #41bcff);
			color: #FFFFFF;
			margin: 0 auto;
			text-align: center;
			.icon{
				overflow: hidden;
				display: inline-block;
				position: relative;
				height:30px;
				width: 40px;
				
			}
			.icon-del {
			background: url(../../static/img/scan2.png) no-repeat;
			background-size: 70%,70%;
			height:100%;
			width:100%;
			display: inline-block;
			}
			 .icon >.icon-del {
			   filter: drop-shadow(20px 0 #ffffff); 
			   position: relative;
			   left: -24px;
			   }
			
		}
	}
</style>